$select-prefix: 'rc-select';

// * {
//   box-sizing: border-box;
// }



.#{$select-prefix} {
  display: inline-block;
  position: relative;

  &-disabled {
    &,
    & input {
      cursor: not-allowed;
    }

    .#{$select-prefix}-selector {
      opacity: 0.3;
    }
  }

  // ============== Selector ===============
  .#{$select-prefix}-selection-placeholder {
    opacity: 0.4;
  }

  // ============== Search ===============
  .#{$select-prefix}-selection-search-input {
    appearance: none;
    padding: 0;

    &::-webkit-search-cancel-button {
      display: none;
      appearance: none;
    }
  }

  // --------------- Single ----------------
  &-single {
    width: 100%;
    .#{$select-prefix}-selector {
      display: flex;
      position: relative;
      height: 41px;

      .#{$select-prefix}-selection-search {
        width: 100%;
        appearance: none;
        padding: 12px 10px;
        background: #f2f2f2;
        border-radius: 8px;

        &-input {
          width: 100%;
          opacity: 0;
          display: none;
        }
      }

      .#{$select-prefix}-selection-item,
      .#{$select-prefix}-selection-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        padding: 8px 10px;
        height: 100%;
        font-size: 15px;
        display: flex;
        align-items: center;
      }
    }
  }


  // ================ Icons ================
  &-allow-clear {
    &.#{$select-prefix}-multiple .#{$select-prefix}-selector {
      padding-right: 20px;
    }

    .#{$select-prefix}-clear {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 10;
      height: 100%;
      font-size: 18px;
    }
    .#{$select-prefix}-clear-icon {
      width: 40px;
      height:90%;
      align-items: center;
      justify-content: center;
      display: inline-flex;
    }
  }

  &-show-arrow {
    &.#{$select-prefix}-multiple .#{$select-prefix}-selector {
      padding-right: 20px;
    }

    .#{$select-prefix}-arrow {
      position: absolute;
      right: 5px;
      top: 0;

      &-icon::after {
        content: '';
        border: 5px solid transparent;
        width: 0;
        height: 0;
        display: inline-block;
        border-top-color: #999;
        transform: translateY(5px);
      }
    }
  }

  // =============== Focused ===============
  &-focused {
    .#{$select-prefix}-selector {
      border-color: blue !important;
    }
  }

  // ============== Dropdown ===============
  &-dropdown {
    position: absolute;
    background: #fff;
    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
    border-radius: 2px;
    overflow: hidden;
    z-index: 10000;

    &-hidden{
      display: none;
    }
  }

  // =============== Option ================
  &-item {
    font-size: 16px;
    line-height: 1.5;
    padding: 6px 10px;
    color: rgb(0 0 0 / 85%);
    cursor: pointer;

    // >>> Group
    &-group {
      color: #999;
      font-weight: bold;
      font-size: 80%;
    }

    // >>> Option
    &-option {
      position: relative;

      &-grouped {
        padding-left: 24px;
      }

      .#{$select-prefix}-item-option-state {
        position: absolute;
        right: 0;
        top: 4px;
        display: none;
      }

      // ------- Active -------
      &-active {
        background: #f5f5f5;
      }

      // ------ Disabled ------
      &-disabled {
        color: #999;
      }
    }

    // >>> Empty
    &-empty {
      text-align: center;
      color: #999;
    }
  }
}




